// var styleJson1 = [
//     {
//         "featureType": "land",
//         "elementType": "geometry",
//         "stylers": {
//             "color": "#0f216cff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "water",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#0f216cff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "building",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#04155dff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "building",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#000344ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "water",
//         "elementType": "geometry",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "village",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "town",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "district",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "country",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "city",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "continent",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "poilabel",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "poilabel",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "scenicspotslabel",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "scenicspotslabel",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "transportationlabel",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "transportationlabel",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "airportlabel",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "airportlabel",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 3
//         }
//     }, {
//         "featureType": "green",
//         "elementType": "geometry",
//         "stylers": {
//             "color": "#52aeceff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "scenicspots",
//         "elementType": "geometry",
//         "stylers": {
//             "color": "#0f216cff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "scenicspots",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "scenicspots",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "weight": 1,
//             "color": "#000000ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "continent",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "country",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "city",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "city",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "scenicspotslabel",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "airportlabel",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "transportationlabel",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "railway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "subway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "highwaysign",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "nationalwaysign",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "nationalwaysign",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "provincialwaysign",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "provincialwaysign",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "tertiarywaysign",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "tertiarywaysign",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "subwaylabel",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "subwaylabel",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on",
//             "weight": 90
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "shopping",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "scenicspots",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "scenicspotslabel",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "manmade",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "manmade",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "highwaysign",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "off"
//         }
//     }, {
//         "featureType": "water",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#52aece00",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "road",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "road",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "road",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "road",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "road",
//         "elementType": "labels.text",
//         "stylers": {
//             "fontsize": 24
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#1c4f7eff"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 3
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#1c4f7eff"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 3
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "tertiaryway",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "fourlevelway",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "local",
//         "elementType": "geometry.fill",
//         "stylers": {
//             "color": "#030f46ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "tertiaryway",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "fourlevelway",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "local",
//         "elementType": "geometry.stroke",
//         "stylers": {
//             "color": "#00001eff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "local",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "local",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "fourlevelway",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "tertiaryway",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "labels.text.fill",
//         "stylers": {
//             "color": "#f6f6f6ff",
//             "visibility": "on"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "tertiaryway",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "fourlevelway",
//         "elementType": "labels.text.stroke",
//         "stylers": {
//             "color": "#000000ff",
//             "visibility": "on",
//             "weight": 1
//         }
//     }, {
//         "featureType": "fourlevelway",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 1
//         }
//     }, {
//         "featureType": "tertiaryway",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 1
//         }
//     }, {
//         "featureType": "local",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 1
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 3
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 3
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "geometry",
//         "stylers": {
//             "weight": 3
//         }
//     }, {
//         "featureType": "highway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "highway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "highway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "highway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "highway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "nationalway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "nationalway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "nationalway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "nationalway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "nationalway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "provincialway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "8,10",
//             "level": "8"
//         }
//     }, {
//         "featureType": "provincialway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "8,10",
//             "level": "9"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "8,10",
//             "level": "8"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "8,10",
//             "level": "9"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "8,10",
//             "level": "8"
//         }
//     }, {
//         "featureType": "provincialway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "8,10",
//             "level": "9"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "6"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "7"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "8"
//         }
//     }, {
//         "featureType": "cityhighway",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "6,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "arterial",
//         "stylers": {
//             "curZoomRegionId": "0",
//             "curZoomRegion": "9,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "geometry",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "9,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "arterial",
//         "elementType": "labels",
//         "stylers": {
//             "visibility": "off",
//             "curZoomRegionId": "0",
//             "curZoomRegion": "9,9",
//             "level": "9"
//         }
//     }, {
//         "featureType": "medicallabel",
//         "elementType": "labels.icon",
//         "stylers": {
//             "visibility": "on"
//         }
//     }];


//编辑器
var option = {
    //地图 标签id
    id: "allmap",
    //初始化地图等级
    level: 13,
    //背景颜色
    // mapBackgroundColor: "rgb(47,45,45)",
    //定位区域
    cityName: '沧州市',
    //标注医院
    hospitals: []
};
var regx = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)+,(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)+$/;


(function ($) {
    var map = new BMap.Map(option.id);

    $.extend({
        baiduMap: {
            // 初始化地图
            init: function (opt) {
                option = $.extend(option, opt)
                this.intomap(map, option.cityName, option.hospitals)
                // console.log(option)
            },
            //创建覆盖物
            //地图id，城市名称，医院json标注列表
            intomap: function (map, cityName, hospitals) {
                map.centerAndZoom(cityName, option.level); // 初始化地图,设置中心点坐标和地图级别。
                //map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
                // map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
                // map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
                map.MapTypeOptions
                //map.disableDragging();     //禁止拖拽
                map.addControl(new BMap.NavigationControl({//添加控件
                    type: BMAP_NAVIGATION_CONTROL_LARGE,
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    offset: new BMap.Size(40, 250)
                }));
                var bdary = new BMap.Boundary();
                bdary.get(cityName, function (rs) { //获取行政区域
                    map.clearOverlays(); //清除地图覆盖物

                    //for循环都删除掉了，只剩下这个
                    //网上查了下，东西经南北纬的范围
                    var EN_JW = "180, 90;"; //东北角
                    var NW_JW = "-180,  90;"; //西北角
                    var WS_JW = "-180, -90;"; //西南角
                    var SE_JW = "180, -90;"; //东南角
                    //todo 此处 添加附盖图
                    //4.添加环形遮罩层
                    var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
                        strokeColor: "none",
                        fillColor: option.mapBackgroundColor,
                        fillOpacity: 1,
                        strokeOpacity: 0.5
                    }); //建立多边形覆盖物

                    map.addOverlay(ply1);
                    //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
                    var ply = new BMap.Polygon(rs.boundaries[0], {
                        strokeWeight: 1,
                        strokeColor: "",
                        fillColor: ""
                    });
                    map.addOverlay(ply);
                    // getcity2(map, city);

                    map.setViewport(ply.getPath());    //调整视野
                    // map.setMapStyleV2({styleJson: styleJson1});//json样式

                    map.setMapStyleV2({//网络id
                        styleId: 'a90623b4ac9146a6e5381b6fa7c8cd3a'
                    });
                    //添加标注
                    if (hospitals != null)
                        $.baiduMap.addMarkerPoint(map, hospitals);
                });
            },
            //标注 添加详细信息
            addMarkerDataHtml: function (hosp) {
                return "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + hosp.hospital_name + "</h4>" +
                    // "<img style='float:right;margin:4px' id='imgDemo' src='http://lbsyun.baidu.com/jsdemo/img/tianAnMen.jpg' width='139' height='104' title='天安门'/>" +
                    "<div style='margin:0;line-height:1.5;font-size:13px;text-indent:1em'>" +
                    "<p>医废总重量：" + hosp.sum_value + " kg</p>" +
                    "<p>医废总数量：" + hosp.sum_bag + " 袋</p>" +
                    "<p>医废当日总重量：" + hosp.day_sum_value + " kg</p>" +
                    "<p>医废当日总数量：" + hosp.day_sum_bag + " 袋</p>" +
                    "</div>";
            },
            getHospitalPoint: function (hospital) {
                if (!regx.test(hospital.point))
                    return null;
                let h = hospital.point.split(',');
                return {
                    lng: h[0],
                    lat: h[1]
                }
            },
            //添加 地点标注 多个坐标
            addMarkerPoint: function (map, hospitals) {
                //icon 图标
                var myIcon = new BMap.Icon("/visual/images/1122241.gif", new BMap.Size(30, 30), { //图片大小
                    anchor: new BMap.Size(10, 25),  //标注相对point的偏移位置
                });
                myIcon.setImageSize(new BMap.Size(30, 30)); //重点重点，设置图片大小
                for (var i = 0; i < hospitals.length; i++) {

                    let HospitalPoint = $.baiduMap.getHospitalPoint(hospitals[i]);
                    console.log(HospitalPoint)

                    if (HospitalPoint != null) {
                        var point = new BMap.Point(HospitalPoint.lng, HospitalPoint.lat);
                        var marker = new BMap.Marker(point, {icon: myIcon});
                        map.addOverlay(marker);
                        let sContent = $.baiduMap.addMarkerDataHtml(hospitals[i])
                        //标注点击 触发按钮
                        marker.addEventListener("click", function () {
                            var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
                            this.openInfoWindow(infoWindow); //开启信息窗口
                            //图片加载完毕重绘infowindow
                            // document.getElementById('imgDemo').onload = function () {
                            //     infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                            // }
                        });
                    }

                }
            }


        }

    });


})(jQuery);




//覆盖物添加点击事件
//获取覆盖物中的 医院
//未完成
function addMarkerClicks() {
    var p = marker.getPosition(); //获取marker的位置
    alert("marker的位置是" + p.lng + "," + p.lat);
}

//获取 行政区
function getcity(map, city) {
    for (var i = 0; i < city.length; i++) {
        var bdary = new BMap.Boundary();
        bdary.get(city[i].name, function (rs) { //获取行政区域
            //map.clearOverlays(); //清除地图覆盖物
            var ply = new BMap.Polygon(rs.boundaries[0], {
                strokeWeight: 1,
                strokeColor: 'rgb(220,20,60)',
                fillColor: ""
            }); //建立多边形覆盖物

            map.addOverlay(ply); //添加覆盖物
            ply.addEventListener("click", function (e) {
                console.log(e);
            });
        });
    }
    //addMarkerCity(map, hospitals);
    addMarkerPoint(map, site);
}

function getcity2(map, city) {
    for (var i = 0; i < city.length; i++) {

        var bdary = new BMap.Boundary();
        bdary.get(city[i].name, function (rs) { //获取行政区域
            //map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                //alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[0], {
                    strokeWeight: 1,
                    strokeColor: 'rgb(220,20,60)',
                    fillColor: "#f6f6f600"
                }); //建立多边形覆盖物
                map.addOverlay(ply); //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            //map.setViewport(pointArray);    //调整视野
            mapClick(map, ply, i);

        });
    }
    addMarkerPoint(map, site);
}

function mapClick(map, ply) {
    //区县 鼠标效果
    ply.addEventListener("click", function (e) {
        var p = e.point;
        var pt = new BMap.Point(e.point.lng, e.point.lat);
        //控制缩放等级
        if (map.getZoom() < 12) {
            var geoc = new BMap.Geocoder();
            geoc.getLocation(pt, function (rss) {
                var addComp = rss.addressComponents;
                //console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                var cityOne = [{}];
                for (var n = 0; n < city.length; n++) {
                    if ((city[n].name).indexOf(addComp.district) != -1) {
                        cityOne = city[n];
                    }
                }
                var sContent = "<div><h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + addComp.district + "</h4>" +
                    "<div  style='margin:0;line-height:1.5;font-size:13px;text-indent:1em'>" +
                    "<p>区域医院数量：" + cityOne.sumhospsize + " 家</p>" +
                    "<p>区域总废物数量：" + cityOne.sumnumber + " 袋</p>" +
                    "<p>区域总废物重量：" + cityOne.sumweight + " kg</p>" +
                    "</div></div>";

                ply.setFillColor("rgb(109, 132, 195)");
                var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口
                map.openInfoWindow(infoWindow, e.point);

            });
        }
    });
    //区县 鼠标效果
    ply.addEventListener("mouseout", function (e) {
        setTimeout(function () {
            ply.setFillColor("#f6f6f600");
        }, 1000);
    });
}

//创建标注 通过名称
function addMarkerCity(map, hospitals) {
    var myGeo = new BMap.Geocoder();
    for (var i = 0; i < hospitals.length; i++) {
        myGeo.getPoint(hospitals[i], function (point) {
            map.addOverlay(new BMap.Marker(point)); //添加覆盖物
        });
    }
}

// import iconCar from '../images/yiliaoshebei.png';


